<template>
  <div class="container">
    <div class="row">
      <div class="col-12 pt-3">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th scope="col">编号</th>
              <th scope="col">科目</th>
              <th scope="col">成绩</th>
              <th scope="col">考试时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody v-if="list.length !== 0">
            <tr v-for="(item, index) in list" :key="item.id">
              <th scope="row">{{ index + 1 }}</th>
              <td>{{ item.subject }}</td>
              <td :class="{ 'not-pass': item.score < 60 }">{{ item.score }}</td>
              <!-- 4. -->
              <td>{{ format(item.time) }}</td>
              <td>
                <button
                  @click="deyByIndex(index)"
                  type="button"
                  class="btn btn-link"
                >
                  删除
                </button>
              </td>
            </tr>

            <tr class="bg-light">
              <th scope="row">统计</th>
              <td colspan="2">总分：0</td>
              <td colspan="2">平均分：0</td>
            </tr>
          </tbody>
          <tfoot v-else>
            <tr>
              <td class="text-center" colspan="5">暂无数据</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <form class="row align-items-center">
      <div class="col-3">
        <input
          v-model.trim="subject"
          type="text"
          class="form-control"
          placeholder="请输入科目"
        />
      </div>

      <div class="col-3">
        <input
          v-model.number="score"
          type="text"
          class="form-control"
          placeholder="请输入分数"
        />
      </div>

      <div class="col-3">
        <button @click.prevent="add" type="submit" class="btn btn-primary">
          添加
        </button>
      </div>
    </form>
  </div>
</template>

<script>
//  2. 导入moment（哪里使用哪里引）
import moment from "moment";
/*
  学习目标：使用moment格式化时间
  步骤：
     1.  npm i moment
*/
export default {
  name: "App",
  data() {
    return {
      subject: "",
      score: 0,
      list: [
        {
          id: 100,
          subject: "语文",
          score: 99,
          time: new Date("2010-08-12"),
        },
        {
          id: 101,
          subject: "数学",
          score: 34,
          time: new Date("2020-09-01"),
        },
        {
          id: 102,
          subject: "英语",
          score: 25,
          time: new Date("2018-11-22"),
        },
        {
          id: 103,
          subject: "体育",
          score: 100,
          time: new Date("2020-12-12"),
        },
      ],
    };
  },

  methods: {
    // 3. 定义format函数
    format(time) {
      return moment(time).format("YYYY-MM-DD  HH:mm:ss");
    },
    deyByIndex(index) {
      this.list.splice(index, 1);
    },
    add() {
      const newItem = {
        id: Date.now(),
        subject: this.subject,
        score: this.score,
        time: new Date(),
      };
      // 5. 通过push添加
      this.list.push(newItem);
      this.subject = "";
      this.score = 0;
    },
  },
};
</script>

<style>
.not-pass {
  color: red;
}
</style>
